<template>
  <div class="img" :style="note">
    <div
      style="
        width: 300px;
        height: 900px;
        background-color: rgba(0, 0, 0, 0.01);
        margin: 0px auto;
        text-align: center;
        position: relative;
      "
    >
      <div
        style="
          width: 300px;
          height: 500px;
          background-color: rgba(0, 0, 0, 0.6);
          text-align: center;
          position: absolute;
          margin-top: 100px;
        "
      >
        <p
          style="
            font-size: 28px;
            font-family: '楷体';
            padding-top: 20px;
            color: slategray;
          "
        >
          登陆/注册
        </p>
        <hr style="width: 90%; height: 0.01px" />
        <!-- 登录页面 -->
        <div v-if="!changeType">
          <div style="margin-top: 40px" @keyup.enter="login">
            <el-input
              v-model="inputName"
              placeholder="请输入账号"
              style="width: 70%"
            ></el-input>
            <el-input
              v-model="inputPassword"
              type="password"
              placeholder="请输入密码"
              style="width: 70%; margin-top: 20px"
            ></el-input>
          </div>

          <el-button
            plain
            style="margin-top: 40px; width: 100px"
            size="small"
            @click="login()"
            >登录</el-button
          >

          <p
            style="font-size: 13px; cursor: pointer; color: slategray"
            @click="changePage"
          >
            注册
          </p>
          <p
            style="font-size: 13px; cursor: pointer; color: slategray"
            @click="back('Index')"
          >
            返回
          </p>
        </div>

        <!-- 注册页面 -->
        <div v-if="changeType">
          <div class="hello">
            <div style="margin-left: 35px">
              <h1 style="color: slategray">{{ msg }}</h1>
              <form>
                <input
                  type="file"
                  @change="getFile($event)"
                  style="color: slategray"
                />
                <button
                  class="button button-primary button-pill button-small"
                  @click="submit($event)"
                >
                  提交
                </button>
              </form>
            </div>
            <div></div>
          </div>

          <div style="margin-top: 20px">
            <el-input
              v-model="RegisterInputName"
              placeholder="请输入用户名"
              style="width: 70%"
            ></el-input>
            <el-input
              v-model="RegisterInputPassword"
              type="password"
              placeholder="请输入密码"
              style="width: 70%; margin-top: 10px"
            ></el-input>
            <el-input
              v-model="RegisterInputPhone"
              placeholder="请输入手机号"
              style="width: 70%; margin-top: 10px"
            ></el-input>
            <el-button
              plain
              style="margin-top: 20px; width: 100px"
              size="small"
              @click="register()"
              >立即注册</el-button
            >
            <p
              style="font-size: 13px; cursor: pointer; color: slategray"
              @click="changePage"
            >
              返回登录
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>





<script>
export default {
  name: "SignUp",

  data() {
    return {
      note: {
        backgroundImage: "url(" + require("../assets/img/starrr.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "1890px 1500px",
      },

      inputName: "",
      inputPassword: "",
      RegisterInputName: "",
      RegisterInputPassword: "",
      RegisterInputPhone: "",
      photoUrl: "",
      changeType: false,
      path: "",
    };
  },
  watch: {},
  mounted() {},
  methods: {
    login() {
      axios
        .post("http://localhost:88/provider/user/login", {
          userName: this.inputName,
          password: this.inputPassword,
        })
        .then((response) => {
          if (response.data.states == 888) {
            this.$notify({
              title: "成功",
              message: "登录成功",
              type: "success",
              duration: 2000,
            });
            var user = JSON.parse(window.sessionStorage.getItem("user"));
            var r = user.role;
            var gg = user.id;
            this.$router.push({
              path: "/Index",
              query: {
                login: true,
                avator: user.photoUrl,
              },
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: response.data.message,
              type: "warning",
              duration: 0,
            });
          }
        })
        .catch((response) => {
          this.$notify.error({
            title: "错误",
            message: "网络错误",
          });
        });
    },
    changePage() {
      this.changeType = !this.changeType;
    },
    getFile: function (event) {
      this.file = event.target.files[0];
    },

    // 头像上传
    submit: function (event) {
      //阻止元素发生默认的行为
      var _this = this;
      event.preventDefault();
      let formData = new FormData();
      formData.append("file", this.file);
      axios
        .post("http://localhost:88/provider/upload/singlefile", formData)
        .then(function (response) {
          alert("上传成功");
          let a = response.data;
          _this.photoUrl = a;
        })
        .catch(function (error) {
          alert("上传失败");
          console.log("error", error);
        });
    },
    register() {
      if (
        this.RegisterInputName == "" ||
        this.RegisterInputPassword == "" ||
        this.RegisterInputPhone == "" ||
        this.photoUrl == ""
      ) {
        this.$notify({
          title: "警告",
          message: "请填写注册信息",
          type: "warning",
          duration: 2000,
        });
      } else {
        axios
          .post("http://localhost:88/provider/user/regist", {
            userName: this.RegisterInputName,
            password: this.RegisterInputPassword,
            role: "user",
            phone: this.RegisterInputPhone,
            photoUrl: this.photoUrl,
          })
          .then((response) => {
            if (response.data.states == 800) {
              console.log(response);
              this.$notify({
                title: "成功",
                message: "注册成功",
                type: "success",
                duration: 2000,
              });
              this.$router.replace("/Login");
            } else if (response.data.states == 300) {
              this.$notify.error({
                title: "错误",
                message: response.data.message,
                type: "warning",
                duration: 0,
              });
            } else {
              this.$notify.error({
                title: "错误",
                message: "错误",
                type: "warning",
                duration: 0,
              });
            }
          })
          .catch((response) => {});
      }
    },

    //返回
    back(path) {
      this.$router.replace({ path: path });
    },
  },
  destroyed() {
    this.socket.onclose = this.close();
  },
};
</script>

<style scoped>
</style>
